<template>
  <div id="yh">
    <common-head father-name="内容管理" child-name="栏目管理"></common-head>
    <el-divider></el-divider>
    <div id="title" style="text-align: left"><h3>栏目列表</h3></div>

    <!--<div id="handle"> </div>-->

    <div class="span">
        <el-button class="el-icon-plus" @click="handleClick()" type="primary" size="small" style="margin-left: -20px;margin-top: 2px;" >添加</el-button>
      </div>
      <div class="span">
        <el-button class="el-icon-delete" @click="del(scope.row,scope.$index)" type="danger" size="small" style="margin-left:6px;margin-top: 20px; ">删除</el-button>
      </div>

    <div style="height: 30px;"></div>
    <!--<el-alert
      title="已选择4项，可以进行批量操作"
      type="success"
      show-icon>
    </el-alert>-->
    <div id="crazy_hat">
      <div class="div_out">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">

          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column prop="name" label="栏目名称" align="center">
          </el-table-column>
          <el-table-column prop="sequence" label="栏目顺序" align="center" sortable>
          </el-table-column>
          <el-table-column prop="describe" label="栏目描述" align="center" >
          </el-table-column>

          <el-table-column label="是否启用" align="center">
            <template  slot-scope="scope">
              <span v-if="scope.row.useing">
                <el-switch
                  v-model="value1"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </span>
              <span v-else>
                <el-switch
                  v-model="value2"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </span>

            </template>
          </el-table-column>

          <el-table-column fixed="right" prop="manager" label="操作" align="center" >
            <template slot-scope="scope">
              <el-button @click="edit" type="text" size="mini" >编辑</el-button>
              <el-button @click="del(scope.row,scope.$index)" type="text"  size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div style="float: right;margin-top: 5px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15]"
            :page-size= 'size'
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <el-dialog title="新增栏目" :visible.sync="dialogFormVisible" width="30%">
          <el-form>
            <el-form-item label="栏目名称:" :label-width="formLabelWidth">
              <el-input v-model="newName" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>

            <el-form-item label="栏目顺序:" :label-width="formLabelWidth" size="medium">
              <el-select v-model="options_selected"  placeholder="请选择栏目顺序" style="width: 450px;">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">

                </el-option>
                <!--<el-option label="1" value="跑步健身"></el-option>
                <el-option label="2" value="减脂健身"></el-option>
                <el-option label="3" value="睡个好觉"></el-option>
                <el-option label="4" value="保护心脏"></el-option>
                <el-option label="5" value="健康日常"></el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
              <el-input v-model="descr" type="textarea" :autosize="{ minRows: 9}" placeholder="请输入栏目的描述，30字以内"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>

          </div>
        </el-dialog>

      </div>
    </div>
  </div>

</template>

<script>

  import CommonHead from "../system/common/commonHead";
  export default {
    name: "ColumnManage",
    components: {CommonHead},
    created() {
      //生命周期函数,用来初始化数据，比如发送初始化数据请求。vue实例创建后，即向后端发送请求，获取json格式的字符串数据
      this.getSection();
    },
    data() {
      return {
        value1:false,
        value2:true,
        value:'100',
        tableData: [],
        currentPage4: 1,
        total:0,
        size:5,
        dialogFormVisible: false,
        formLabelWidth: '80px',

    /*  tableData: [{
          name: '跑步技巧',
          sequence: '1',
          describe: '这里是关于本栏目的简要描述，30字以内',
          status:''
        }, {
          name: '减脂健身',
          sequence: '2',
          describe: '这里是关于本栏目的简要描述，30字以内',
          status: ''
        }, {
          name: '睡个好觉',
          sequence: '3',
          describe: '这里是关于本栏目的简要描述，30字以内',
          status: ''
        }, {
          name: '保护心脏',
          sequence: '4',
          describe: '这里是关于本栏目的简要描述，30字以内',
          status: ''
        }, {
          name: '健康日常',
          sequence: '5',
          describe: '这里是关于本栏目的简要描述，30字以内',
          status: ''
        }],*/
        multipleSelection: []
      }
    },

    methods: {
      /*getSection(){
        this.axios.get('/section/all',{
          params:{
            pageSize: this.pageSize,
            pageNum: this.pageNum,
          }
        }).then(res => {
          console.log(res.data);
          this.tableData=res.data.data
          this.total=res.data.data.total;
        })
      },*/
      getSection: function () {
        this.axios.get('micro-content-server/section/all')
          .then(response => {
            this.tableData = response.data.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      handleSizeChange(val) {
        this.tableData=[]
        this.currentPage4 = 1
        if(all.length < val){
          for (let i=0;i<all.length;i++){
            this.tableData[i] = all[i]
          }
        }else {
          for (let i=0;i<val;i++){
            this.tableData[i] = all[i]
          }
        }
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.tableData=[]
        let j = this.size
        let start = j * (val - 1 )
        if(all.length > val*this.size){
          for (let i=0;i<j;i++){
            this.tableData[i] = all[i+start]
          }
        }else {
          for (let i=0;i<all.length-start;i++){
            this.tableData[i] = all[i+start]
          }
        }
      },
      del() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>



<style scoped>
  #yh{
    width:1500px;
    margin: 0 auto;
    margin-top: 55px;

  }

  #crazy_hat{
    height:50px;
    background-color:#eeeeee;
    text-align:center;
    line-height:50px;
    margin-top: 10px;
  }
  .div_out {
    margin-top: 15px;
  }
  .span{
    display: inline-block;
    margin-left: 30px;
  }
 /* #handle{
    margin-right: 1286px;
    margin-top: 5px;
  }*/



</style>
